import { Modal } from 'antd'
import { useState, useContext } from 'react'
import { AppContext } from '@/store'
import LoginForm from './LoginForm'
import RegisterForm from './RegisterForm'

const LoginModel = () => {
  const { state, dispatch } = useContext(AppContext)

  const switchHandle = (flag) => {
    dispatch({type: "SET_STATUS", payload:flag})
  }

  const cancelHandle = () => {
    dispatch({ type: 'SET_VISIBLE', payload: false })
  }
  return (
    <Modal
      className="custom-modal"
      open={state.modelVisible}
      footer={null}
      centered={true}
      width="80%"
      style={{ maxWidth: '440px' }}
      onCancel={cancelHandle}
    >
      {state.loginStatus === 0 ? (
        <RegisterForm switchHandle={switchHandle} />
      ) : (
        <LoginForm switchHandle={switchHandle} />
      )}
    </Modal>
  )
}

export default LoginModel
